<template>
    <div class="ChartTemplateZone">
    <div class="ChartTemplateTitle">图形示例</div>
    <div class="ChartTemplateContenZone">
        <el-row>
            <el-col v-for="i in FileList" :key=i.uuid :span="4" :offset="index > 0 ? 2 : 0">
                <el-card :body-style="{ padding: '0px' }" @click="clickCard(i)"
                    :style="{ backgroundColor: i.backColor }">
                    <img v-bind:src=i.iconURL class="image" />
                    <div style="padding: 0px">
                        <span>{{ i.name }}</span>
                    </div>
                </el-card>
            </el-col>
        </el-row>
    </div>
</div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router';
const router = useRouter();

import { useStore } from 'vuex';
const store = useStore();

import axios from 'axios'
import { LgxCompressTool } from '../../script/canvas/common/tools/commpresstool.js'
import lgxcom from '../../script/canvas/common/common'

let stTime = 0;
let endTime = 0;
let FileList = ref([])

const clickCard = (item) => {
    window.gstore.commit("switchLazyFile", item);
    let editorPath = "/viso";
    switch (item.fileMode) {
        case "viso":
            editorPath = "/viso";
            break;

        case "autocad":
            editorPath = "/cad";
            break;

        case "xmind":
            editorPath = "/xmind";
            break;
    }
    router.push(editorPath);
}



const parseFiles = (fileJsonObjArray) => {
    console.log("parseFiles---------");
    FileList.value = [];
    for (var i = 0; i < fileJsonObjArray.length; i++) {
        var unitObj = fileJsonObjArray[i];
        let uuid = unitObj["uuid"];
        let name = unitObj["name"];
        if (name == "test345") {
            console.log(name);
        }
        let parent = unitObj["parent"];
        let zipIconURL = unitObj["iconURL"];
        let maintype = unitObj["maintype"];
        let projectid = unitObj["projectid"];
        let userid = unitObj["userid"];
        let fileMode = unitObj["filetype"];
        let iconURL = zipIconURL;
        
        let backColor = '#ffffff';
        let extInfoStr = unitObj["extInfo"];
        if (extInfoStr && extInfoStr.length > 0){
            let extInfo = JSON.parse(extInfoStr);
            let bk = new lgxcom.LGXColor();
            bk.setColorByValue(parseInt(extInfo.backColor));
            backColor = bk.toHexString();
        }
        let errFlag = false;
        if (maintype != "subfile") {
            if (iconURL.length == 0) {
                iconURL = "/res/icon/0x030d0104.png";
            }
            else {
                try {
                    iconURL = LgxCompressTool.deCompresseBase64Str(zipIconURL);
                    console.log("zipLenth:" + zipIconURL.length + " origLenth:" + iconURL.length);
                }
                catch (error) {
                    console.log("error uuid:" + uuid + " name:" + name);
                    iconURL = zipIconURL;
                    errFlag = true;
                }
            }
            let newFile = { uuid, name, parent, iconURL, projectid, userid, fileMode, backColor };
            FileList.value.push(newFile);
        }
    }
    store.commit("updateTemplateFile", FileList.value);
}

const getAllFiles = () => {
    var url = "api/graph/getAll";
    let userid = "longx13";//store.state.uid;
    var postObj = { userid };
    axios.post(url, postObj).then(res => {
        console.log(res.data);
        parseFiles(res.data);
        const currentDate = new Date();
        endTime = currentDate.getTime();
        let t = (endTime - stTime);
        console.log("time elapse:"+t);
    }).catch(function (error) {
        console.log(error);
    })
}

onMounted(() => {
    console.log("chart onMounted");
    let memFileList = store.state.cacheTemplateList;
    if (memFileList.length > 0) {
        FileList.value = memFileList;
    }
    else {
        const currentDate = new Date();
        stTime = currentDate.getTime();
        getAllFiles();
    }
})

</script>

<style>
.time {
    font-size: 12px;
    color: #999;
}

.bottom {
    margin-top: 13px;
    line-height: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.button {
    padding: 0;
    min-height: auto;
}

.image {
    width: 100%;
    display: block;
    border-radius: 4px;
    border-bottom: 20px;
}

.ChartTemplateTitle {
    font-family: verdana;
    color: rgb(204, 255, 0);
    font-size: 20px;
    text-align: center;
    margin: 0;
    background-color: rgb(96, 112, 112);
    height: 30px;
}

.ChartTemplateZone {
    max-height: 100%;
    height: 100%;
}

.ChartTemplateContenZone{
    height: 400px;
    max-height: 100%;
    overflow-y: auto;
}
</style>